@import  url("./common.less");

/******表单样式*******/
// 表单顶部标题和提交按钮（固定fixed）
.fm-title{
	z-index: 9;
	position: fixed;
	top: var(--window-top);
	line-height: 70rpx;
	width: 100%;
	display: flex;
	background: #fff;
	padding: 10rpx;
	
	.title{
		flex: 1;
		font-size: 40rpx;
		font-weight: 600;
		color: #666;
		
		.icon{
			display: inline-block;
			width: 14rpx;
			height: 14rpx;
			margin-right: 10rpx;
			display: inline-block;
			border-radius: 50%;
			background: #ffffff;
			vertical-align: middle;
		}
		
		.line-icon{
			display: inline-block;
			width: 8rpx;
			height: 40%;
			margin-right: 10rpx;
			background: #ffffff;
			vertical-align: -2rpx;
		}
	}
}
	
.my-fm{
	padding-top: 20rpx;
	
	.no-box{
		box-shadow: none !important;
	}
	
	.f-item {
		background: #FFFFFF;
		box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1);
		margin: 0rpx 20rpx 20rpx 20rpx;
		padding: 10rpx 20rpx;
		position: relative;
		border-radius: 12rpx;
		line-height: 80rpx;
		
		//uView 自带u-form-item
		.u-form-item{
			padding: 6rpx 0rpx;
		}
		
		// 针对折叠组件样式
		.i-collspan-row{
			width: 100%;
				
			.icr-title{
				position: relative;
				color: #000000;
				font-size: 32rpx;
				
				// 图标按钮
				.r-l-icon{
					display: inline-block;
					width: 14rpx;
					height: 14rpx;
					margin-right: 10rpx;
					display: inline-block;
					border-radius: 50%;
					background: #ffffff;
					vertical-align: middle;
				}
				
				.icr-icon{
					position: absolute;
					right: 30rpx;
					top: calc((100% - 32rpx)/2);
				}
				
				.icr-text{
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					font-size: 28rpx;
					color: #666;
				}
			}
			
			.icr-ul{
				// max-height: 720rpx;
				// overflow-y: auto;
				
				.icr-li:not(:last-child){
					border-bottom: 2rpx dashed #efefef;
				}
				
				.icr-li{
					display: flex;
					position: relative;
					
					.li-left-item{
						display: flex;
						flex: 1;
					}
					
					.li-right-item{
						display: flex;
						width: 200rpx;
						margin-left: 10rpx;
					}
					
					.li-title-icon{
						width: 50rpx;
					}
					
					.li-title-text{
						font-size: 26rpx;
						font-weight: 600;
						color: #666;
						width: 80rpx;
					}
					
					.li-r-icon{// 图标
						// position: absolute;
						// top: calc((100% - 40rpx)/2);
						// right: 0rpx;
					}
					
					.li-con{
						flex: 1;
						position: relative;
						margin-right: 10rpx;
						
						.li-inp{
							height: 70rpx;
							color: #00C3CE;
						}
						
						.li-c-text{
							width: 300rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						
						.li-cr-icon{// 图标
							position: absolute;
							top: calc((100% - 24rpx)/2);
							right: 0rpx;
						}
						
						.li-cr-text{// 文本
							color: #666;
							position: absolute;
							top: 0rpx;
							right: 0rpx;
						}
					}
				}
			}
		}
		
		// box的标题
		.f-item-title{
			border-bottom: 2rpx solid #efefef;
			position: relative;
			font-weight: 600;
			font-size: 30rpx;
			background: #fff;
			z-index: 9;
			
			.r-l-icon{
				position: absolute;
				top: 20rpx;
				left: -20rpx;
				display: inline-block;
				height: 50%;
				width: 8rpx;
				background-color: #00c3ce;
			}
			
			.r-r-con{
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
		
		.i-row-bottom-line{
			border-bottom: 2rpx solid #efefef;
		}

		// 下拉选择框
		.i-row{
			width: 100%;
			display: flex;
			height: 80rpx;

			.r-title{
				color: #000000;
				font-size: 32rpx;
				width: 200rpx;

				// 图标按钮
				.r-l-icon{
					display: inline-block;
					width: 14rpx;
					height: 14rpx;
					margin-right: 10rpx;
					display: inline-block;
					border-radius: 50%;
					background: #ffffff;
					vertical-align: middle;
				}
				
				// 文本提示
				.r-title-tip{
					font-size: 24rpx;
					color: #666;
				}
			}

			.r-con{
				flex: 1;
				margin-right: 0;
				color: #777;
				font-size: 28rpx;
				position: relative;
				display: flex;
				justify-content: flex-end;
				width: calc(100% - 200rpx);
				
				.u-field{
					padding: 0rpx !important;
				}
				
				.c-text{
					color: #00C3CE;
					line-height: 80rpx;
					text-align: right;
					width: calc(100% - 30rpx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				
				.c-tip{
					padding-right: 35rpx;
					color: #c0c4cc;
				}

				.c-r-icon{
					width: 0rpx; /*  宽高设置为0，很重要，否则达不到效果 */
					height: 0rpx;
					position: absolute;
					right: 30rpx;
					top: calc((100% - -4rpx)/2);
				}
				
				// 提示文本
				.i-r-text{
					// color: #666;
					// position: absolute;
					// top: 0rpx;
					// right: 0rpx;
					padding-left: 10rpx;
				}
			}

			.i-input{
				padding-right: 10rpx !important;

				.inp{
					padding: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					border: none;
					text-align: right;
				}
			}

			.i-date{

				.u{
					padding: 0 20rpx;
				}

				label:last-child{
					color: @mainColor;
				}
			}

		}

		// 多行文本框
		.i-row-textarea{
			width: 100%;

			.r-title{
				color: #000000;
				font-size: 32rpx;

				// 图标按钮
				.r-l-icon{
					width: 14rpx;
					height: 14rpx;
					margin-right: 10rpx;
					display: inline-block;
					border-radius: 50%;
					background: #ffffff;
					vertical-align: middle;
				}
				
				// 文本提示
				.r-title-tip{
					font-size: 24rpx;
					color: #666;
				}
			}

		}

	}


}